情境

CSS 選擇器的分組，能夠幫助我們用更簡潔又更容易維護的寫法來達到同樣的效果。

舉個例子來說，假設我們要讓兩個元素都改變顏色，不用分組選擇器的寫法會是這樣：

h1 {
  color: blue;
}

h2 {
  color: blue;
}

這樣的意思是說，我想要讓所有 h1 標籤以及 h2 標籤都的文字都變成 blue 這個顏色。

那假設我們我們要做的事情越來越複雜呢？例如我要讓所有的 hx 標籤都改變顏色，那我不用分組選擇器的寫法會是這樣：

h1 {
  color: blue;
}

h2 {
  color: blue;
}

h3 {
  color: blue;
}

h4 {
  color: blue;
}

h5 {
  color: blue;
}

h6 {
  color: blue;
}

不知道看到上述這段 CSS 的時候，大家的感想是如何呢？
我們可以看到上述程式碼中，color: blue; 這個樣式不斷的在重複，可以說是某種程度上違背了DRY (Don't Repeat Yourself）原則。

雖然說重複的程式碼可能不會讓程式的運行馬上就壞掉，但是他帶來潛在的壞處有可能會比這更可怕。

簡單舉幾點來說：

1. 可讀性降低
   • 過長的程式碼會讓可讀性下降，因此也會造成程式難以維護。
2. 難以修改
   • 當我們發現這些重複的代碼需要被修改時，你需要修改這所有重複的地方，會很沒有效率，並且會很難確保我們沒有漏網之魚。

因此 CSS 提供分組的寫法，讓我們能夠降低這些重複，我們將上述的舉例拿來修改，就可以寫成這樣：

h1, h2, h3, h4, h5, h6 {
 color: blue;
}

光是一行 color: blue; 就讓分組選擇器的效果這麼顯著，那想想實際上的案例，一定能夠達到非常驚人的效果。

你能看見多遠的未來呢？

既然分組選擇器這麼好用，那我是不是應該把所有程式碼裡面重複的 CSS 都改寫呢？乍聽之下，這樣做應該是沒有錯，方向正確，大部分的情境下是沒問題的，但事實上，有一些少數的情境卻會讓分組選擇器失效。

我們來看看下面這個例子：

p::selection,
p::-moz-selection {
  background: transparent;
}

在有些瀏覽器中，如果瀏覽器不認得其中任何一條 CSS 規則，那他將會放棄所有的樣式。有點像是小孩子在吃魚，吃了一口發現有魚刺，不會單獨把魚刺挑出來，而是會整口吐出來。

例如，在 non-Mozilla browsers 中，他不認得 ::-moz-selection 這行的意思，因此他將會放棄這括號理所有的 CSS。

此外，Mozilla browsers 他不認得 ::selection，因此，他也會放棄括號裡面所有的 CSS 規則。

我們原本同時寫上 ::-moz-selection 以及 ::selection，是為了讓 non-Mozilla browsers 以及 Mozilla browsers 都能夠支援，希望考慮到在不同瀏覽器上都能夠正常運作。但因為我們使用分組選擇器，反而造成所有的瀏覽器都放棄這些 CSS 樣式。

隨著瀏覽器的版本不同，這些狀況有可能會發生，也有可能不會發生，因此，當遇到這些情況時，我們不建議此時使用分組選擇器，應該改為原本拆分開來的寫法，類似於把雞蛋放在不同的籃子裡的策略：

p::selection {
  background: transparent;
}

p::-moz-selection {
  background: transparent;
}

這樣至少壞掉了一個，另一個還可能有機會能正常運作。

小結

我們鼓勵使用分組選擇器來讓我們程式碼變得更簡潔也更好維護，但是在使用時，會需要特別留意可能會造成失效的情境。